<template>
	<!--这里是抽奖转盘组件-->
	<div class="rotary-box">
		<div class="wrap-box">
			<div class="header-tip" :class="[lotteryNumOpcityClass]">
				- 当前还剩 {{lotteryNum}} 次抽奖机会 -
			</div>
			<div class="circle-box">
				<div class="gif-twinkle-box"></div>
				<div class="lottery-footer-box"></div>
				<div :class="[cricleDiscNum]" ref='cricleDisc' :style="{transform:rotateAngle,transition:tranInof}">
					<ul class="gift-container">
						<li v-for="(item, index) in prizeList" :key="index" :style="{'transform': `rotate(${index * 360 / prizeList.length+rotateNum}deg)`}">
							<!--0 谢谢参与 1 实物 2.券码-->
							<template v-if="item.prizeType=='0'">
								<p class="thanks-p">谢谢</p>
								<p class="thanks-p-cy">参与</p>
							</template>
							<template v-else-if="item.prizeType=='1'">
								<p>{{item.prizeNm}}</p>
							    <img  :src="item.picUrl ||defaultPngSW">
							</template>
							<template v-else-if="item.prizeType=='2'">
								<p>{{item.prizeNm}}</p>
							    <img  :src="item.picUrl ||defaultPngLQ">
							</template>
						</li>
					</ul>
				</div>
				<div class="circle-btn" @click="startTuentable">
					立即抽
				</div>
			</div>
			<div class="rule" ><span @click="clickLotteryRule">抽奖规则</span><span @click="roomMineLotteryList">我的奖品</span></div>
			<div class="tuenttable-add-chance-btn" v-if='isAddChangeBtn' >
				<img src="../../assets/images/choujiang/cj-gift.png" />
				<p @click="addChange">增加抽奖机会</p>
			</div>
			<div class="rotary-close-btn" @click="clickClose"></div>
		</div>

	</div>
</template>

<script>
	//import { Popup } from 'vant';
	export default {
		props: {
      roomInfo:Object,
			lotteryInfoObj: Object, //抽奖数据
			activityId:String,//抽奖活动id
			addDrawTimes:Number,//增加的抽奖次数
			applyAddLotteryNum:Number,//报名增加的抽奖次数
		},
		data() {
			return {
				rotateAngle: '',
				tranInof: '',
				prizeList: [], //奖品信息
				prizeIndex: '', //中间下标
				prizeSwitch: true, //抽奖开关
				clickBtnNum: 0, //抽奖点击次数
				cricleDiscNum:'',// 转盘格数  6  或者 8
				rotateNum:'',
				roomId: this.$route.params.roomid, //房间id
				lotteryInfo:{},//中奖信息
				isAddChangeBtn:false,
				lotteryNum:this.lotteryInfoObj.userDrawTimes,//抽奖的次数
				lotteryNumOpcityClass:'opcity-num-0',
				defaultPngSW:require("@/assets/images/choujiang/shiwu.png"),
				defaultPngLQ:require("@/assets/images/choujiang/liquan.png"),
				//lotteryNum:110,
			}
		},
		components: {},
		watch:{
			addDrawTimes(){//监听抽奖的次数
				this.lotteryNum = this.lotteryNum + this.addDrawTimes;
			},
			applyAddLotteryNum(){
				this.lotteryNum = this.lotteryNum + this.applyAddLotteryNum;
				this.lotteryNumOpcityClass = 'opcity-num-1';
				this.discAnimationStart()
			}
		},
		created() {
			//this.lotteryInfoObj.drawRange='0'
			if(this.lotteryInfoObj.isAddDrawTimes == '1'){//增加抽奖机会按钮打开  0-关 ,1-开  默认为关
				this.isAddChangeBtn = true;
			}
			if(this.lotteryInfoObj.lottoPrizeList.length=='6'){//30
			   this.cricleDiscNum = 'cricle-disc-six';
			   this.rotateNum = 30;

			}else if(this.lotteryInfoObj.lottoPrizeList.length=='8'){//22.5
				this.cricleDiscNum = 'cricle-disc-eight';
				this.rotateNum = 22.5;
			}
			this.prizeList = this.lotteryInfoObj.lottoPrizeList
			if(this.lotteryInfoObj.drawRange=='1'){//报名
				this.lotteryNumOpcityClass = 'opcity-num-0'
			}else if(this.lotteryInfoObj.drawRange=='0'){//全部用户
				this.lotteryNumOpcityClass = 'opcity-num-1'
			}
//			this.prizeList = [
//				{
//				  "id": 102,
//				  "activityId": 38,
//				  "positionId": 1,
//				  "prizeType": 0,
//				  "prodTicketId": 40,
//				  "prizeNm": "1iPhone 11 一台大红色就看到 ",
//				  "probability": 0,
//				  "prizeNum": 50,
//				  "prizeStock": 50,
//				  "rwAddress": false,
//				  "state": 1,
//				  "mHand": 2,
//				  "winTimes": "2021-05-14 14:19:09",
//				  "creator": "",
//				  "channel": "",
//				  "level": "",
//				  "crtTime": null,
//				  "uptTime": null,
//				  "picUrl": 'https://saas-sjtest.oss-cn-shenzhen.aliyuncs.com/yidong/20201103/d6dcc5bc080a4764ad3e8dc727a87949.jpg?x-oss-process=image/resize,m_fixed,h_70,w_70'
//				},
//			]
		},
		methods: {
      roomMineLotteryList(){//我的奖品列表
        this.$emit('formChildMsg',{
              type:'minePrizeLiveList',
              data:'ruan'
        })
        this.$store.dispatch("setIsGlobalMaskClick", false);
      },
			addChange(){//增加抽奖机会
				this.$emit('formChildMsg',{
		          type:'addChange',
		          data:'ruan'
		        })
			},
			clickLotteryRule(){//抽奖规则
				 this.$emit('formChildMsg',{
		          type:'lotteryRule',
		          data:'ruan'
		        })
			},
			dianwo(index) { //中奖区间
				this.prizeIndex = index + 1;
				console.log(this.prizeIndex);
			},
			clickClose() {
				this.$emit('formChildMsg', {
					type: 'closeTurntable',
					data: 'ruan'
				})
			},
			discAnimationStart(){
				//console.log('动画执行')
				if(this.lotteryNum=='0'){
					fun.toastMessage('您的抽奖次数已用完');
					return
				}
					this.lotteryNum-- ;
					this.prizeSwitch = false;
					this.getLotteryData();//请求中奖接口
					this.clickBtnNum++;
					this.rotateNumber = 360 * 5 * this.clickBtnNum;
					this.rotateAngle = 'rotate(' + this.rotateNumber + 'deg)';
					this.tranInof = 'transform 4s cubic-bezier(0.6, 0, 1, 1) 0s';
					setTimeout(() => {
						if(this.prizeIndex) { //返回了值
							this.clickBtnNum++;
							this.rotateNumber = 360 * 5 * this.clickBtnNum + fun.computedDeg(this.lotteryInfoObj.lottoPrizeList.length, this.prizeIndex);
							this.rotateAngle = 'rotate(' + this.rotateNumber + 'deg)';
							this.tranInof = 'transform 4s cubic-bezier(0, 0, 0.6, 1) 0s';
							setTimeout(() => {
								this.$emit('formChildMsg', {
									type: 'lotteryResult',
									data: this.lotteryInfo
								})
								this.prizeSwitch = true;
								this.prizeIndex = ''; //清空中奖信息
							}, 4500)

						} else {
							this.clickBtnNum++;
							this.rotateNumber = 360 * 5 * this.clickBtnNum + 360;
							this.rotateAngle = 'rotate(' + this.rotateNumber + 'deg)';
							this.tranInof = 'transform 4s cubic-bezier(0, 0, 0.6, 1) 0s';
							//fun.toastMessage('后台接口返回超过4s 或者无返回');
						}

					}, 4000)
			},
			startTuentable() { //开始抽奖 //drawSource  0 全选, 1 微信用户, 2 APP用户
         if(window.terminal.weixin){//微信
             if(this.lotteryInfoObj.drawSource=='2'){
                  fun.toastMessage('仅限APP用户参加抽奖');
                  return
             }
         }else{
             if(this.lotteryInfoObj.drawSource=='1'){
                  fun.toastMessage('仅限微信用户参加抽奖');
                  return
             }
         }
         if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') { //  isUc 已经判断民生 微信    通行证
           fun.msySkipSinePage('live', this.$route.params.roomid, this.roomInfo.source) //调用微信 民生银行通行证
           return
         }
         if (window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
           window.bank.userInfoPlugin.isLogin((res) => {
             //console.log('zxyh res.isLogin',res.isLogin)
             if (res.isLogin) { //  true 已经登录
             } else { //  false  未登录
               fun.zxyhLogin(window.location.href) //调起登录
               return
             }
           })
         }
         if(this.$store.state.isYk){
            fun.ykDisposeFun();
            return
         }
				 //判断抽奖要不要报名  drawRange 抽奖范围 0 全部用户 ，1 报名用户 2 指定用户
				if(this.lotteryInfoObj.drawRange=='1'){//报名
					this.$emit('formChildMsg', {
						type: 'openApplyLottery',
						data: 'ruan'
					})
				}else if(this.lotteryInfoObj.drawRange=='0'){//全部用户
					if(this.prizeSwitch) { //可以抽奖
						this.discAnimationStart();//开始抽奖
					} else { //不能抽奖
						if(this.lotteryNum>0){
							fun.toastMessage('手速太快啦~休息一下再抽吧');
						}
					}
				}

			},
			getLotteryData(){//请求抽奖结果接口
				this.$http.get("/lotto/drawLotto?account="+this.$store.state.userInfo.un+"&roomId="+this.roomId+"&activityId="+this.activityId).then(res => {
//					  res.data.data = {
//					  	'effeEndTime':'2015-02-25',
//					  	'effeStartTime':'2015-02-25',
//					  	'picUrl':'https://saas-zxyhzb.oss-cn-shenzhen.aliyuncs.com/yidong/20210511/1620700453543.jpg?x-oss-process=image/resize,m_fixed,h_424,w_750',//中奖图片地址
//					  	'positionId':'2',//位置ID 从1开始
//					  	'prizeNm':'苹果手机一部',
//					  	'prizeId':'56',//抽中奖品的ID,//奖品名称
//					  	'prizeType':'1',//0 谢谢参与 1 实物 2.券码
//					  	'rwAddress':true,//是否填写地址 true 是需要填写
//					  	'ticketNo':'ashwiudwheudhwe',//中奖券码
//					  	'winDesc':'中奖说明中奖说明中奖说明中奖说明中奖说明中奖说明',//中奖说明
//					  }
						if(res.data.code == "000000") {
							 this.lotteryInfo = res.data.data;//中奖信息
					     this.prizeIndex = res.data.data.positionId;
						}else if(res.data.code == "100009"){
							console.log('抽奖未开始',res.data)
							setTimeout(()=>{
								this.$emit('formChildMsg', {
									type: 'openlotteryErrorTipCom',
									data: 'ruan'
								})
							},2000)
						}else{
							console.log('抽奖结果报错',res.data)
							setTimeout(()=>{
								this.$emit('formChildMsg', {
									type: 'openlotteryErrorTipCom',
									data: 'ruan'
								})
							},2000)
						}

					})
					.catch(response => {
						console.log(response);
					});
			}
		}
	}
</script>

<style scoped="scoped">
	.opcity-num-0{
		opacity: 0;
	}
	.opcity-num-1{
		opacity: 1;
	}
	.wrap-box{
		width:100vw;
		height: 900px;
		/* background: salmon; */
		position: relative;
	}
	.lottery-footer-box{
		width: 475px;
		height: 116px;
		background: url(../../assets/images/choujiang/lottery-footer.png) no-repeat;
		background-size: 475px 116px;
		position: absolute;
		left: 40px;
		bottom: -30px;
		z-index: 1000;
	}
	.gif-twinkle-box{
		width: 580px;
		height: 580px;
		background: url(../../assets/images/choujiang/lottery-gif.gif) no-repeat;
		background-size:  580px  580px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1001;
	}
	.thanks-p{
		margin-top: 40px !important;
	}
	.thanks-p,.thanks-p-cy{
		font-size: 34px;
		font-weight: bold;
		height: 40px !important;
	}
	.thanks-p-cy{

		margin-top: 0 !important;
		line-height: 34px !important;
	}
	.gift-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/*background: darkcyan;
		position: absolute;*/
	}

	.gift-container li {
		width: 500px;
		height: 500px;
		background: transparent;
		/*display: flex;
		justify-content: flex-start;
		align-items: center;*/
		position: absolute;
		transform-origin: center center 0;
		font-size: 25px;
		color: #F84F2E;
	}

	.gift-container li p {
		width: 150px;
		height: 60px;
		/*background: seagreen;*/
		margin: 14px auto 0;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 30px;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/*-webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;*/
	}

	.gift-container li img {
		width: 85px;
		height: 75px;
		display: block;
		margin: 6px auto 0;
	}

	.rotary-box {
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index: 1010;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	    flex-direction: column;
	}

	.header-tip {
		width: 364px;
		height: 56px;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 50px;
		font-size: 26px;
		line-height: 56px;
		text-align: center;
		color: white;
		margin:  0 auto;
	}

	.circle-box {
		width: 580px;
		height: 580px;
		/*background: saddlebrown;*/
		margin: 10px auto;
		position: relative;
		font-size: 40px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cricle-disc-six {
		width: 580px;
		height: 580px;
		border-radius: 50%;
		background: seagreen;
		transform-origin: center;
		background: url(../../assets/images/choujiang/circle_bg_six.png) no-repeat;
		background-size: 580px 580px;
		transition: transform 15s cubic-bezier(.2, .93, .43, 1) infinite;
		position: relative;
		z-index: 1000;
	}
	.cricle-disc-eight {
		width: 580px;
		height: 580px;
		border-radius: 50%;
		background: seagreen;
		transform-origin: center;
		background: url(../../assets/images/choujiang/circle_bg.png) no-repeat;
		background-size: 580px 580px;
		transition: transform 15s cubic-bezier(.2, .93, .43, 1) infinite;
		position: relative;
		z-index: 1000;
	}
	@keyframes ruan {
		from {}
		to {}
	}

	.circle-btn {
		width: 229px;
		/*	width: 262px;*/
		height: 262px;
		background: url(../../assets/images/choujiang/cricle-btn.png) no-repeat;
		/*	background: white;*/
		/*border-radius: 50%;*/
		background-size: 229px 262px;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1002;
		/*margin-left: -131px;
		margin-top: -131px;*/
		margin-left: -114px;
		margin-top: -135px;
		font-size: 40px;
		font-weight: bold;
		color: #FEFEFE;
		text-align: center;
		line-height: 262px;
	}

	.rule {
		width: 100vw;
		height: 40px;
		font-size: 26px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
    position: absolute;
    top: 670px;
    left: 0;
    z-index: 1001;
	}

	.rule span {
		display: inline-block;
		border-bottom: 1px solid white;
		padding: 2px;
    margin: 0 17px;
	}

	.tuenttable-add-chance-btn {
		width: 382px;
		height: 78px;
		background: #FB1450;
		box-shadow: 0px 13px 35px 0px #FC5A84;
		border: 5px solid #FE8794;
		border-radius: 39px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		font-weight: 500;
		color: #FFFFFF;
    position: absolute;
    top: 725px;
    left: 186px;
	}

	.tuenttable-add-chance-btn img {
		width: 41px;
		height: 40px;
		margin-right: 11px;
	}

.rotary-close-btn {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: 346px;
	}
</style>
